<!--
 * @Descripttion: 
 * @Author: MajorMayer
 * @Date: 2021-08-09 18:17:36
 * @LastEditors: 周杨
 * @LastEditTime: 2021-08-24 15:59:53
-->
<template>
  <div>
    <!-- banner -->
    <BaseBanner :bannerList="bannerList" />
    <div class="container">
      <div class="content">
        <div class="html-p" v-for="(item,index) in homeText" :key="index" v-html="item.F_Content"></div>
      </div>
      <div class="flex-around icons">
        <router-link to="/applicaion/form">
          <div class="item flex-center">
            <span class="iconfont icon-bianji"></span>
            <div>{{cdns.home_menu_1}}</div>
            <div>{{cdns.home_menu_1_cn}}</div>
          </div>
        </router-link>
        <router-link to="/schedule">
          <div class="item item2 flex-center">
            <span class="iconfont icon-rili-copy"></span>
            <div>{{cdns.home_menu_2}}</div>
            <div>{{cdns.home_menu_2_cn}}</div>
          </div>
        </router-link>
        <router-link to="/activity">
          <div class="item item3 flex-center">
            <span class="iconfont icon-huodong"></span>
            <div>{{cdns.home_menu_3}}</div>
            <div>{{cdns.home_menu_3_cn}}</div>
          </div>
        </router-link>
      </div>
    </div>
  </div>

</template>
<script>
import { GetArticle } from "@/api/home";

export default {
  inject: ["cdns"],
  name: "home",
  data() {
    return {
      bannerList: [],
      homeText: [],
    };
  },
  mounted() {
    document.querySelector(".app").style.backgroundColor = "#fff";
    GetArticle().then((res) => {
      const homeText = res.data.Data || [];
      this.homeText = homeText;
    });
    this.bannerList = [{ F_FilePath: window.cdns.home_banner }];
    this.$nextTick(() => {
      // 在dom渲染完后,再执行动画
      this.$ut.WOW();
    });
  }
};
</script>
<style scoped lang="scss">
.content {
  margin: 79px auto;

  p {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #4d4d4d;
  }
}

.icons {
  margin-bottom: 138px;

  .item {
    border-radius: 10px;
    width: 300px;
    height: 150px;
    background-color: #169b90;
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 20px;
    flex-direction: column;
    transition: 300ms;
    .iconfont {
      font-size: 40px;
      margin-bottom: 5px;
    }
    &:hover {
      opacity: 0.8;
    }
  }

  .item2 {
    background-color: #dc6131;
  }

  .item3 {
    background-color: #0d65a4;
  }
}
</style>